<template>
	<view>
		<view class="map">
			<map ref="map" id="map" style="width: 100%; height: 89vh" :scale="16" latitude="22.5430600000"
				longitude="114.0578600000" :show-compass="true" :show-location="true" @markertap="dpcdetail"
				:markers="covers">
			</map>
			<view class="dzinfo" v-show="show">
				<view class="item" @click="gotodetail(detail.id)">
					<view class="title">{{ detail.title }}</view>
					<view class="desc">{{ detail.address }}</view>
					<view class="txt">
						<view class="num">
							<text class="num-su" v-if="detail.czdata.kx_num > 0">闲</text>
							<text class="num-fa" v-if="detail.czdata.kx_num == 0">满</text>
							<text class="num-facc" v-if="detail.czdata.kx_num == 0">空闲{{ detail.czdata.kx_num }}个洗衣机</text>
							<text class="num-succ" v-if="detail.czdata.kx_num > 0">空闲{{ detail.czdata.kx_num }}个洗衣机</text>
							<text class="num-allcc">共{{ detail.czdata.num }}个洗衣机</text>
						</view>
						<view class="detail">去洗衣</view>
						<view class="clear"></view>
					</view>
					<view class="gotomap"><u-icon name="map-fill" color="#23BF61" size="20"></u-icon>
						<text>{{ detail.juli }}km</text> </view>
				</view>
			</view>
			<view class="mylocation">
				<image src="../../static/My Location.png" mode="" @tap="dingwei"></image>
			</view>
			<com-map ref="commap" @myevent="setlocation"></com-map>
			<com-tabbar :currentTab="currentTab"></com-tabbar>
		</view>
	</view>
</template>

<script>
let that
import {
	mapState,
	mapActions
} from 'vuex'
export default {
	data() {
		return {
			show: false,
			id: 0,
			latitude: 22.5430600000,
			longitude: 114.0578600000,
			covers: [{
				width: 20,
				height: 20,
				latitude: 22.5430600000,
				longitude: 114.0578600000,
				id: 1,
				title: '测试洗衣店电站',
				address: '广东省惠州市龙门大道123号',
				juli: 0.5,
				czdata: {
					kx_num: 2,
					num: 4
				},
			},
			{
				width: 20,
				height: 20,
				latitude: 22.5430600000,
				longitude: 114.0578610000,
				id: 2,
				title: '测试洗衣店',
				address: '广东省惠州市龙门大道123号',
				juli: 0.5,
				czdata: {
					kx_num: 2,
					num: 4
				},
			},
			],
			detail: {
				title: '洗衣店名称洗衣店名称洗衣店名称',
				address: '洗衣店地址洗衣店地址洗衣店地址洗衣店地址洗衣店地址',
				juli: '1.2',
				czdata: {
					kx_num: 10,
					num: 20,
				},
				id: 1
			},
			currentTab: 'article'
		}
	},
	onShow() {
		// #ifndef MP-WEIXIN
		uni.hideTabBar()
		// #endif
		this.show = false//点击地图弹框默认隐藏
		this.getlist()//初始化地图标点
	},
	mounted() {
		that = this
	},
	computed: {
		//引入store全局变量
		...mapState(['mylocation', 'mylocationState'])
	},
	methods: {
		//电站详情
		dpcdetail(e) {
			//触发标点事件
			this.covers.find(item => {
				that.show = true
				this.id = e.detail.markerId//赋值电站ID
			})
			//请求电站详情接口
			// this.$http_api.dpcdetail({
			// 	id: this.id,
			// 	latitude: this.latitude,
			// 	longitude: this.longitude
			// }).then((res) => {
			// 	that.detail = res
			// })
		},
		getlist() {
			//判断定位状态
			if (!this.mylocationState) {
				//调取组件定位方法
				this.$refs.commap.setlocation()
				return
			} else {
				this.latitude = this.mylocation.latitude
				this.longitude = this.mylocation.longitude
			}
			//获取电站列表
			// this.$http_api.dpclist({
			// 	type: 1	//1：地图 2：推荐
			// }).then((res) => {
			// 	//给地图设置标点
			// 	that.covers = res
			// })
		},
		//跳转详情页
		gotodetail(id) {
			uni.navigateTo({
				url: "/pages/detail/detail-electromobile?id=" + id
			})
		},
		//点击定位到当前位置
		dingwei() {
			uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
				latitude: this.latitude,
				longitude: this.longitude,
			});
		},
		//子组件通过$emit给父组件传值，@myevent和$emit('myevent',###)里的myevent名称一致，e=子组件传过来的值
		setlocation(e) {
			this.latitude = e.latitude
			this.longitude = e.longitude
			this.getlist()
		}
	},
}
</script>

<style lang="scss" scoped>
.map {
	position: relative;
}

.dzinfo {
	position: absolute;
	bottom: 15%;
	background-color: #fff;
	width: 96%;
	left: 0;
	right: 0;
	margin: 0 auto;

	.item {
		// box-shadow:0px 0px 6px #dfdfdf;
		padding: 30rpx 20rpx;

		.gotomap {
			position: absolute;
			right: 20rpx;
			top: 35rpx;
			display: flex;
			font-size: 28rpx;
			color: #333;

			text {
				margin-left: 3px;
			}
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.desc {
			font-size: 30rpx;
			color: #333;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 26rpx;

			.num {
				float: left;
				margin-top: 6rpx;

				.num-su {
					padding: 4rpx 8rpx;
					background: #23BF61;
					color: #fff;
					border-radius: 6rpx;
					margin-right: 15rpx;
				}

				.num-fa {
					padding: 4rpx 8rpx;
					background: #f10000;
					color: #fff;
					border-radius: 6rpx;
					margin-right: 15rpx;
				}

				.num-succ {
					color: #23BF61;
				}

				.num-facc {
					color: #f10000;
				}

				.num-allcc {
					margin-left: 15rpx;
					padding-left: 15rpx;
					border-left: 1px solid #999;
				}
			}

			.detail {
				font-size: 28rpx;
				color: #23BF61;
				border: 1px solid #23BF61;
				border-radius: 40rpx;
				width: 130rpx;
				text-align: center;
				line-height: 46rpx;
				float: right;
			}
		}
	}
}

.mylocation {
	position: absolute;
	right: 2%;
	bottom: 40%;

	image {
		width: 70rpx;
		height: 70rpx;
		padding: 5px;
		background-color: #fff;
		border-radius: 100%;
	}
}
</style>